<template>
  <el-dialog v-model="dialogVisible" :title="title" width="50%" :before-close="handleClose">
    <el-form :disabled="isDisabled" label-position="left" ref="goodsFormRef" size="small" label-width="80px" :rules="rules" :model="formData">
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="formData.goodsName"></el-input>
      </el-form-item>
      <el-form-item label-width="110px" label="商品一级类型" prop="type">
        <el-select v-model="formData.type" @change="setChildType">
          <template v-for="item in GoodsTypeEnum">
            <el-option v-if="typeof item === 'number'" :key="item" :label="GoodsTypeEnum[item]" :value="item"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label-width="110px" label="商品二级类型" prop="type">
        <el-select v-model="formData.childType" placeholder="请选择商品二级类型">
          <el-option v-for="item in childTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model.number="formData.price"></el-input>
      </el-form-item>
      <el-form-item label="库存" prop="number">
        <el-input v-model.number="formData.number"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNum">
        <el-input v-model="formData.phoneNum" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="description">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer v-if="playType!=='detail'">
      <span class="dialog-footer">
        <el-button size="small" @click="handleClose">取消</el-button>
        <el-button :loading="submitLoading" size="small" type="primary" @click="submitData">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import GoodsTypeEnum from '@/enum/GoodsTypeEnum'
import {IGoodsInfo,SAVE_GOODS} from '@/api/goods'
import { computed } from 'vue';
const submitLoading = ref(false)
const dialogVisible = ref(false)
const playType = ref('add')
const title = computed(() => {
  return playType.value === 'add' ? '新增商品' : playType.value === 'edit' ? "编辑商品详情": '查看商品详情'
})
const isDisabled = computed(() => {
  return playType.value === 'detail' ? true : false
})
const emits = defineEmits(['refreshData'])
// const props = defineProps<{
//   dataId: string
// }>()
// console.log(props)
const data = ref<IGoodsInfo>({
  goodsName: '',
  goodsPicture: '',
  childType: '',
  phoneNum: '',
  type: 1,
  price: 0,
  description: '',
  number: 0
})
const formData = ref<IGoodsInfo>({
  goodsName: '',
  goodsPicture: '',
  childType: '',
  type: 1,
  phoneNum: '',
  price: 0,
  description: '',
  number: 0
})
const getDetail = () => {
  //就是调用获取详情接口获取详情数据
  formData.value = {
    phoneNum: data.value.phoneNum,
    goodsPicture: data.value.goodsPicture,
    goodsName: data.value.goodsName,
    price: data.value.price,
    number: data.value.number,
    type: data.value.type,
    childType: data.value.childType,
    description: data.value.description
  }
  console.log(formData.value)
  setChildType(formData.value.type)
  formData.value.childType = data.value.childType
}
const setData = (dataObj: IGoodsInfo) => {
  data.value = dataObj
  getDetail()
}
const childTypeList = ref()
const electronicGoodsData = [
  {
    label: '手机类',
    value: '1'
  },
  {
    label: '电脑类',
    value: '2'
  }
]
const clothesGoodsData = [
  {
    label: '外套类',
    value: '3'
  },
  {
    label: '毛衣类',
    value: '4'
  }
]
const goodsFormRef = ref()
function checkPhoneNum(_rule: any, value: any, callback: any) {
  const reg = /^1[3-9][0-9]{9}/
  // console.log(reg.test('18312341234'))
  if(!reg.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}
const rules = ref({
  goodsName: [
    {required: true, message: '请输入商品名称', trigger: 'blur'}
  ],
  phoneNum:[
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {validator: checkPhoneNum, message: '请输入正确的手机号', trigger: 'blur'}
  ],
  type: [
    {required: true, message: '请选择商品类型', trigger: 'change'}
  ],
  price: [
    {required: true, message: '请输入商品价格', trigger: 'blur'}
  ],
  number: [
    {required: true, message: '请输入商品库存', trigger: 'blur'}
  ],
  description: [
    {required: true, message: '请输入商品库存', trigger: 'blur'}
  ]
})
const setChildType = (typeValue?: number) => {
  const value = typeValue || formData.value.type
  formData.value.childType = ''
  if(value===2) {
    childTypeList.value = clothesGoodsData
  } else if(value===1) {
    childTypeList.value = electronicGoodsData
  }
}
const handleClose = () => {
  // emits('closeDialog')
  formData.value = {
    phoneNum: '',
    type: 1,
    childType: '',
    goodsName: '',
    goodsPicture: '',
    price: 0,
    description: '',
    number: 0
  }
  // goodsFormRef.value.resetFields()
  dialogVisible.value = false
  submitLoading.value = false
}

// onMounted(() => {
//   setChildType(formData.value.type)
// })
const submitData = async () => {
  console.log('提交数据')
  submitLoading.value = true
  await goodsFormRef.value.validate((res: boolean) => {
    if(res) {
      console.log('提交表单')
      const params:  IGoodsInfo = {
        goodsName: formData.value.goodsName,
        phoneNum: formData.value.phoneNum,
        price: formData.value.price,
        goodsPicture: formData.value.goodsPicture || 'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/phones-new/mate-60-pro/kv.jpg',
        number: formData.value.number,
        description: formData.value.description,
        type: formData.value.type,
        childType: formData.value.childType
      }
      if(data.value.id) {
        params.id = data.value.id
      }
      SAVE_GOODS(params).then((res) => {
        console.log(res)
        handleClose()
        emits('refreshData')
        submitLoading.value = false
      })
      //发请求调用添加的接口添加数据
    } else {
      submitLoading.value = false
    }
  })
}
defineExpose({
  dialogVisible,
  playType,
  setData,
  setChildType
})
</script>@/api/goods